<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script> -->
</head>
<body>
    <div id="app">
        <Hello></Hello>
    </div>

    <template id="hello">
        <div>
            <!-- 4.组件内的数据只能在组件的模板范围内使用 -->
            {{money}}
            <hr>
            {{msg}}
        </div>
    </template>
</body>
<script>
    /*
        * 1. 为什么组件中data是一个函数呢？
            * 根组件是树型结构中最大的那个，也是唯一的
            * 子孙组件是有多个的？他们的数据要求是具有独立性的？
            * 总结：函数给组件提供了一个作用域空间
        * 2. 为什么组件的data这个函数必须要返回一个对象呢？
            * 因为data选项是要完成数据响应式原理的，而Object defineProperty 的第一个参数要求就是一个对象 
    */ 
 Vue.component('Hello',{
    template:'#hello',
    data(){
        //1.除了根组件外，其他组件中data必须是一个函数
        //2.data选项必须有返回值，而且返回值必须是一个对象
        return{
            //3.这里就是我们要的数据 放在这里
            money:'200000',
            msg:'Hello 你好'
        }
    }
 })   
   
 new Vue({//创建根组件
   el:"#app",
  
    
   })
</script>
</html>